<template>
  <div class="reset-container">
    <!-- 重置 -->
    <div :class="{ animate: submit }" class="btnTime" @click="beginReset">
      <!-- 倒计时文本 -->
      <span v-if="!submit">点击重置数据</span>
      <span v-else>{{ count }}秒后重置</span>
    </div>
  </div>
</template>

<script>
import { resetData } from '@/api/home'
export default {
  data() {
    return {
      count: 5,
      submit: false
    }
  },
  methods: {
    async resetData() {
      await resetData()
    },
    // 重启服务
    beginReset() {
      if (this.submit) return
      this.submit = true
      if (this.count === 5) {
        this.timer = setInterval(async() => {
          if (this.count === 0) {
            clearInterval(this.timer)
            this.count = 5
            this.submit = false
            await resetData()
            this.$message.success('数据重置成功')
            return
          }
          this.count--
        }, 1000)
      }
    }
  }
}
</script>

<style scoped>
.reset-container {
    background-image: url('~@/assets/common/back.png');
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.btnTime {
  margin: 100px auto;
  width: 300px;
  height: 300px;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 300px;
  font-size: 40px;

}
.btnTime:hover {
   border: 5px solid #23dc12c7;
}

</style>
